import React, { useEffect } from 'react';
const THREE = (window.THREE = require('three'));
require('three/examples/js/controls/OrbitControls');
import styles from './index.less';

export default (props) => {
  useEffect(() => {
    init();
    initRoute();
  }, []);
  const init = () => {
    const cubeDom = document.getElementById('cube_id');
    // 创建场景对象Screen
    const scene = new THREE.Scene();

    // 创建网格模型
    // const geometry = new THREE.SphereGeometry(60, 40, 40); // 球体
    const geometry = new THREE.BoxGeometry(100, 100, 100); // 构建长宽高100的立方体
    const meterial = new THREE.MeshLambertMaterial({
      // 立方体的材质，颜色 透明度..
      color: 0x00ff00,
    });
    const mesh = new THREE.Mesh(geometry, meterial); // 网络模型对象
    scene.add(mesh);

    // 光源设置
    const point = new THREE.PointLight(0xffffff); // 相当于底光颜色
    point.position.set(500, 200, 300); // 打光的位置
    scene.add(point);

    const ambient = new THREE.AmbientLight(0x004400); // 环境光
    scene.add(ambient);

    // 相机设置
    const width = 500;
    const height = 300;
    const k = width / height;
    const s = 200;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);

    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1);
    cubeDom.appendChild(renderer.domElement);
    function renderFun() {
      renderer.render(scene, camera);
      mesh.rotateY(0.01);
      requestAnimationFrame(renderFun);
    }
    renderFun();
  };
  const initRoute = () => {
    const cubeDom = document.getElementById('cube_id2');
    // 创建场景对象Screen
    const scene = new THREE.Scene();

    // 创建网格模型
    // const geometry = new THREE.SphereGeometry(60, 40, 40); // 球体
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    const meterial = new THREE.MeshLambertMaterial({
      // 立方体的材质，颜色 透明度..
      color: 0xff00ff,
    });
    const mesh = new THREE.Mesh(geometry, meterial); // 网络模型对象
    scene.add(mesh);

    // 光源设置
    /**
     * 相当于底光颜色(一个点向各个方向发射的光源，灯泡,0.8-光照强度)
     */
    const point = new THREE.PointLight(0xff0000, 0.8); //
    point.position.set(500, 200, 300); // 打光的位置
    scene.add(point);

    const ambient = new THREE.AmbientLight(0x00ffff); // 环境光
    scene.add(ambient);

    // 相机设置（画布大小）
    const width = 500;
    const height = 300;
    const k = width / height;
    const s = 200;

    const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position);

    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0x00ced1, 1);
    cubeDom.appendChild(renderer.domElement);

    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
      renderer.render(scene, camera);
    });
  };
  return (
    <div>
      <div id="cube_id"></div>
      <div id="cube_id2"></div>
    </div>
  );
};
